<template>
    <div
        class="functionalwindow"
        :id="functionalwindowId"
        :style="{
            // transform: `translateX(${option.left}px) translateY(${option.top}px)`,
            left: `${option.left}px`,
            top: `${option.top}px`,
            right: `${option.right}px`,
        }"
    >
        <div
            class="coverageTitle"
            @mousedown="windowMousedown($event)"
            @mouseup="mouseup"
            @mouseout="mouseup"
        >
            <div class="coverageTitleName">
                <i class="btnsImages" :class="props.icon"></i>
                {{ props.title }}
            </div>
            <i
                class="fa fa-close closeIcon"
                title="关闭"
                @click="setCoverage"
            ></i>
        </div>
        <header>
            <slot name="header"></slot>
        </header>
        <div
            class="functionalwindowmainbox"
            :class="
                !props.isFooter
                    ? 'functionalwindowMain'
                    : 'functionalwindowMainFootor'
            "
        >
            <div
                class="moveLeft"
                @mousedown="moveDocMousedown($event)"
                @mouseup="movemouseup"
                @mouseout="movemouseup"
            ></div>
            <div
                class="moveRight"
                @mousedown="moveDocMousedown($event)"
                @mouseup="movemouseup"
                @mouseout="movemouseup"
            ></div>
            <main
                :class="
                    !props.isFooter
                        ? 'functionalwindowMain'
                        : 'functionalwindowMainFootor'
                "
            >
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <slot></slot>
                </el-scrollbar>
            </main>
        </div>
        <footer class="functionalwindowFooter" v-if="props.isFooter">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script setup lang="ts">
import { computed, watch, ref, reactive } from "vue";
import {
    mousedown,
    mouseup,
    moveMousedown,
    movemouseup,
} from "@/utils/move.el";
import { closeContextMenu, widget, store, graphicLayer } from "@/utils/global";
import { ElMessage, ElMessageBox } from "element-plus";
import { saveEditorDraw } from "@/utils/draw/saveEditorDrawData";
import { getDrawData } from "@/api/draw";
import renderer from "@/utils/draw/renderer";
interface Props {
    title?: string; // 默认值
    icon?: string;
    type?: string;
    options?: string;
    isFooter?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    title: "",
    icon: "",
    type: "",
    options: "right",
    isFooter: true,
});
const functionalwindowId = `functionalwindow${new Date().getTime()}`;
// 对话框位置
const option: any = reactive({
    left: 10,
    top: 48,
    right: "auto",
});
if (props.options == "right") {
    const docW = document.body.clientWidth;
    option.right = 10;
    option.left = "auto";
}
const windowMousedown = (doc: any) => {
    mousedown(doc, option, functionalwindowId);
};
const moveDocMousedown = (doc: any) => {
    moveMousedown(doc, option, functionalwindowId);
};
// 关闭对话框
const setCoverage = () => {
    widget[props.type] = false;
    closeContextMenu();
    if (props.type == "property") {
        let type = store.rightClickData.type;
        if (type != "folder") {
            let graphic = graphicLayer.getGraphicById(store.rightClickData.id);
            graphic.stopEditing();
        }
    } else {
        store.rightClickData = undefined;
    }
};
const editElement = computed(() => {
    return widget.property;
});
// 关闭属性编辑对话框
watch(
    () => editElement.value,
    (newVal, oldVal) => {
        if (newVal || store.rightClickData == undefined) return;
        let graphic = graphicLayer.getGraphicById(store.rightClickData.id);
        if (!newVal && widget.isEditorStyles) {
            widget.isEditorStyles = false;

            ElMessageBox.confirm(
                "当前标绘修改后未保存,是否保存?<br> 温馨提示: 取消后将撤销已编辑属性!",
                "提示",
                {
                    confirmButtonText: "保存",
                    cancelButtonText: "取消",
                    type: "warning",
                    dangerouslyUseHTMLString: true,
                }
            )
                .then(() => {
                    // 保存
                    saveEditorDraw(graphic);
                    store.rightClickData = undefined;
                    graphic.stopEditing();
                })
                .catch(() => {
                    // 取消
                    // 撤销编辑
                    getDrawData({ id: graphic.id }).then((res) => {
                        graphicLayer.removeGraphic(graphic);
                        renderer([res.data]);
                        ElMessage.warning("已撤销编辑");
                    });
                    store.rightClickData = undefined;
                });
        } else {
            store.rightClickData = undefined;
            graphic.stopEditing();
        }
    }
);
// widget.isEditorStyles
</script>
